    @mixin partCommon {
        margin-bottom: 20px;
        h2 {
            border-bottom: 3px solid #000;
        }
        .content {
            width: 100%;
            padding: 2%;
            .example {
                margin: 20px 0;
            }
        }
    }
    
    .inner {
        width: 50%;
        margin: 0 auto;
        .part-1 {
            @include partCommon;
            .content {
                .example {
                    .aa {
                        width: 100px;
                        height: 100px;
                        background-color: #0ec569;
                    }
                    .bb {
                        background-color: #999;
                    }
                    .cc {
                        width: 100px;
                        height: 200px;
                        background-color: #aa3344;
                    }
                }
            }
        }
        .part-2 {
            @include partCommon;
            .content {
                .example {
                    border: 1px solid #000;
                    div {
                        width: 100px;
                        height: 50px;
                        background-color: #e64cde;
                        margin: 10px 20px;
                        float: left;
                    }
                }
            }
        }
        .part-3 {
            @include partCommon;
            .content {
                .example {
                    .pic {
                        width: 100px;
                        height: 50px;
                        background-color: #5c82c7;
                    }
                }
            }
        }
        .part-4 {
            @include partCommon;
            .content {
                .example {
                    .pic {
                        width: 50%;
                        min-width: 200px;
                        img {
                            width: 100%;
                            height: auto;
                        }
                    }
                    ul li {
                        span {
                            width: 40%;
                            float: left;
                        }
                        i {
                            margin-left: 10px;
                        }
                    }
                }
                .example2 {
                    .pic {
                        width: 25%;
                        min-width: 50px;
                        img {
                            width: 100%;
                        }
                    }
                    .words {
                        margin-left: 30%;
                    }
                }
            }
        }
    }
    
    // 文字装饰
    .decoration {
        .trans1 {
            transition: .5s;
            cursor: pointer;
            &:hover {
                text-decoration: underline solid #DD4F42;
                font-weight: bold;
            }
        }
        .animation {
            position: relative;
            text-decoration: none;
            overflow: hidden;
            cursor: pointer;
            line-height: 2;
            &::before {
                content: attr(data-content);
                position: absolute;
                top: 0;
                left: 0;
                color: transparent;
                white-space: nowrap;
                text-decoration: underline wavy #000;
                z-index: -1;
            }
            &:hover::before {
                animation: move 3s infinite linear;
            }
        }
        .anim2 {
            a {
                background: linear-gradient(90deg, #ff3c41, #fc0, #0ebeff);
                background-size: 0 3px;
                background-repeat: no-repeat;
                background-position: 0 100%;
                transition: 1s all;
                color: #0cc;
            }
            a:hover {
                background-size: 100% 3px;
                color: #000;
            }
        }
        @keyframes move {
            100% {
                transform: translate(-209px, 0);
            }
        }
    }
    
    // filter
    .gray {
        filter: gray !important;
        filter: grayscale(100%);
        -webkit-filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
        -o-filter: grayscale(100%)
    }
    
    .filter_box {
        img {
            width: 200px;
            height: auto;
        }
        .p1 {
            /* 使用SVG filter */
            // filter: url("filters.svg#filter-id");
            // /* 使用filter函数 */
            filter: blur(2px); //图片模糊
            // filter: brightness(0.4);  //光感
            // filter: contrast(200%);     //曝光
            // filter: drop-shadow(16px 16px 20px blue);//外边缘阴影
            // filter: grayscale(50%);  //置灰
            // filter: hue-rotate(90deg);  //色差
            // filter: invert(75%);  //反差色
            // filter: opacity(25%);//透明度
            // filter: saturate(30%);//饱和度
            // filter: sepia(60%);//复古滤镜
            // /* 多个filter */
            // filter: contrast(50%) brightness(90%); //对比度，亮度
            // /* 不使用filter */
            // filter: none;
            // /* 全局变量 */
            // filter: inherit;
            // filter: initial;
            // filter: unset;
        }
        .p2 {
            // box-shadow: 1px 1px 15px rgba(0, 0, 0, .5);  //盒子外阴影
            filter: drop-shadow(1px 1px 15px rgba(0, 0, 0, .7)); //图像边缘阴影
        }
    }
    
    // js常见应用场景
    #div1 {
        width: 300px;
        height: 200px;
        background-color: red;
    }
    
    #div2 {
        width: 250px;
        height: 150px;
        background-color: green;
    }
    
    #div3 {
        width: 200px;
        height: 100px;
        background-color: blue;
    }